<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="nav-box flexWrap">
					<view class="nav-item" :class="{active:currmentIndex==0}" @tap="changeNav(0)">进行中</view>
					<view class="nav-item" :class="{active:currmentIndex==1}" @tap="changeNav(1)">预约中</view>
					<view class="nav-item" :class="{active:currmentIndex==2}" @tap="changeNav(2)">已结束</view>
					<view class="nav-item" :class="{active:currmentIndex==3}" @tap="changeNav(3)">已取消</view>
				</view>
				<view class="empty-box flexWarpCenterColumn" v-if="showEmpty">
					<image src="/static/empty-img.png" class="empty-image"></image>
					<view class="empty-tips">暂无订单</view>
					<view class="goOrder-btn" @tap="goIndex()">去开台</view>
				</view>
				<scroll-view class="VerticalMain" lower-threshold="50rpx" @scrolltolower="lower" scroll-y
					scroll-with-animation style="height: calc(89.4vh);" refresher-enabled="true" show-scrollbar="false"
					:refresher-triggered="triggered" refresher-default-style="white" :refresher-threshold="100"
					refresher-background="#090c11" @refresherrefresh="onRefresh" @refresherrestore="onRestore" v-if="!showEmpty">
					<view class="order-box">
						<view class="order-item" v-for="(item,index) in orderList" :key='index'
							@tap="goOrderDetails(item.order_no)">
							<view class="item-top flexWrap">
								<view class="order-info flexWarpColumn">
									<view class="table-info flexWrapNo">
										<view class="big">{{item.numText}}</view>
										<view class="info">
											<view class="table-name flexWrapNo">
												{{item.characters}}
												<view class="residue flexWrapNo" v-if="item.order_status==10">
													<view class="order-status">
														使用中
													</view>
													<liu-countdown ref="countdown3" :showHours="false" auto mode="2"  :showDays="false" :endDate="item.service_end_time"></liu-countdown>
												</view>
												<view class="order-status" style="margin-left: 12upx;" v-else :class="{'end':item.order_status==20||item.order_status==30,'noStarted':item.order_status==0}">
													<block v-if="item.order_status==0">待使用</block>
													<block v-if="item.order_status==20">已结束</block>
													<block v-if="item.order_status==30">已取消</block>
													<block v-if="item.order_status==40">已超时</block>
												</view>
											</view>
											<view class="store-name flexWrapNo">
												<image src="../static/home/navigation-icon.png" class="navigation-icon">
												</image>
												{{item.shop_name}}
											</view>
										</view>
									</view>
									<view class="order-time">
										<block v-if="item.order_type=='immediately'">立刻开台</block>
										<block v-if="item.order_type=='make_appointment'">预约开台</block>
										<block v-if="item.order_type=='other_packages'">其他套餐</block>
										<block v-if="item.order_type=='about_ball'">同城约球</block>
										<block v-if="item.quantity&&item.quantity!=0">({{item.quantity}}小时)</block>
										<block v-else>({{item.minute||0}}分钟)</block>
									</view>
									<view class="order-text">
										<text>订单时间：</text>
										{{item.service_date}} {{item.start_time}}～
										<block v-if="item.is_ci==1">次日</block> {{item.end_time}}
									</view>
									<view class="order-text" v-if="item.payment_method==3||item.payment_method==4">
										<text>团单金额：</text>{{item.reality_price||'--'}}
									</view>
									<view class="order-text" v-else>
										<text>实&nbsp;付&nbsp;款：</text>{{item.actual_payment}}
									</view>
									<view class="order-text">
										<text>下单时间：</text>{{item.createtime}}
									</view>
									<view class="flexWrapNo" style="justify-content: flex-end;">
										<view class="order-btn noStarted" v-if="item.order_status==0"
											@tap.stop="showTips(item,index,0)">开始/开灯</view>
									</view>
								</view>
							</view>
							<view class="open-box flexWrapNo" v-if="item.type==2">
								<view class="renew-btn" v-if="item.order_status==10" @tap.stop="goRenew(item)">续费</view>
								<block v-if="item.isShow==1">
									<view class="open-btn" @tap.stop="goPage('/moduleA/openDoor')">开门</view>
									<view @tap.stop>
										<button class="open-btn share" open-type="share">分享开门</button>
									</view>
								</block>
							</view>
						</view>
						<uni-load-more v-if="showLoadStatus" :status="status" :size="14" :content-text="contentText" />
					</view>
				</scroll-view>
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage">
					<view class="tips-name" v-if="showIndex==0">是否确认开灯？</view>
					<view class="tips-name" v-else>未到结束时间，是否继续关灯？</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeTips()">取消</view>
						<view class="tips-btn noStarted" @tap="openLamp()" v-if="showIndex==0">确定开灯</view>
						<view class="tips-btn noStarted" @tap="opreaAction()" v-else>确定关灯</view>
					</view>
				</view>
				<view class="mask-box" v-if="tipsFlage"></view>
			</view>
		</template>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				pageOpc: 0,
				currmentIndex: 0,
				//下拉刷新
				page: 1,
				size: 10,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				status: 'loading',
				orderList: [],
				tipsFlage: false,
				showIndex: 0,
				order_id: "",
				orderIndex: "",
				triggered: true,
				freshing: false,
				payment_method: 1,
				order_type: "",
				timestamp: "",
				order_no: "",
				order_status: 10,
				statusList: [10, 0, 20, 30]
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onShow() {
			this.freshList();
			this.timestamp = Date.parse(new Date()) / 1000;
			// this._freshing = false;
			// setTimeout(() => {
			// 	this.triggered = true;
			// }, 1000)
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.freshList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onShareAppMessage: function(e) {
			let that = this
			return {
				title: "开门",
				path: `/pages/moduleA/openDoor?store_id=${uni.getStorageSync('store_id')}&token=${uni.getStorageSync('token')}`,
				imageUrl: "",
				success: (res) => {
					uni.showToast({
						title: '分享成功',
						icon: 'success',
						duration: 1500
					})
				}
			}
		},
		methods: {
			goRenew(item) {
				uni.navigateTo({
					url: "/moduleA/beforConfirm?equipment_id=" + item.store_equipment_id + '&renew_order_id=' + item.id+'&order_type=immediately'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/storeList'
				})
			},
			// 触发
			onRefresh() {
				if (this.freshing) return;
				this.freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this.freshing = false;
					console.log(this.triggered)
					console.log(this.freshing)
				}, 1000)
			},
			// 复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
				this.freshList();
			},
			// 触底刷新
			lower() {
				if (this.more) {
					this.getData()
				}
			},
			showTips(order, orderIndex, showIndex) {
				this.tipsFlage = true
				this.order_id = order.id
				this.order_no = order.order_no
				this.payment_method = order.payment_method
				this.order_type = order.order_type
				this.orderIndex = orderIndex
				this.showIndex = showIndex
			},
			closeTips() {
				this.tipsFlage = false
			},
			changeNav(index) {
				this.currmentIndex = index
				this.order_status = this.statusList[index]
				console.log(index)
				console.log(this.order_status)
				this.freshList();
			},
			goOrderDetails(order_no) {
				uni.navigateTo({
					url: "/moduleA/orderDetails?order_no=" + order_no
				})
			},
			// 刷新列表
			freshList() {
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.orderList = []
				this.getData();
			},
			// 订单数据
			getData() {
				let self = this
				this.$request.post(this.$api.orderList, {
					page: this.page++,
					num: this.size,
					order_status: this.order_status
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						let newArray = data
						for (let i in newArray) {
							if (Math.abs(this.timestamp - newArray[i].service_end_time) > 86400) {
								newArray[i].isShow = 0
							} else {
								newArray[i].isShow = 1
							}
							newArray[i].createtime = this.$tools.formatDate(newArray[i].createtime, 1)
							newArray[i].service_start_time = this.$tools.formatDate(newArray[i].service_start_time,
								0)
							newArray[i].service_end_time = this.$tools.formatDate(newArray[i].service_end_time, 0)
							newArray[i].service_date = newArray[i].service_start_time.split(' ')[0]
							newArray[i].start_time = newArray[i].service_start_time.split(' ')[1]
							newArray[i].end_time = newArray[i].service_end_time.split(' ')[1]
							newArray[i].nameList = newArray[i].store_equipment_name.split('')
							newArray[i].isNaNEmpty = newArray[i].nameList.some(item => !isNaN(item)) //这里
						}
						newArray.forEach((item, index) => {
							item.numText = ""
							item.characterText = ''
							//拿到所有的数字
							if(!item.isNaNEmpty||isNaN(item.nameList[0])){
								item.numText = item.nameList[0]
								item.characters = item.nameList.slice(1).join('');
							}else{
								let numText = item.nameList.filter(itemChild => !isNaN(itemChild))
								//拿到所有的汉字
								let characters = item.nameList.filter(itemChild => isNaN(itemChild)) //这是集合
								console.log(numText)
								console.log(characters)
								item.numText = numText.join('')
								item.characters = characters.join('')
							}
						})
						console.log(newArray)
						if (newArray.length == 0 && self.page == 2) {
							self.showEmpty = true
							self.showLoadStatus = false
							self.more = false // 不能再次请求了
							return false;
						} else {
							self.showLoadStatus = true
							self.more = true
							self.showEmpty = false
							self.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							self.status = 'noMore'
							self.more = false
							self.showEmpty = false
						}
						self.orderList = self.orderList.concat(newArray);
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 开灯
			openLamp() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'openLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.openLamp, {
							order_no: this.order_no
						}, {
							token: true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code == 1) {
								this.$tools.showToast('开灯成功')
								this.orderList[this.orderIndex].order_status = 10
								this.closeTips();
							}
						})
					}
				})
			},
			opreaAction() {
				if (this.payment_method != 3 && this.order_type != 'other_packages') {
					this.cancelOrder();
				} else {
					this.closeLamp();
				}
			},
			// 关灯
			closeLamp() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'closeLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.closeLamp, {
							order_no: this.order_no
						}, {
							token: true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code == 1) {
								this.$tools.showToast('关灯成功')
								this.orderList[this.orderIndex].order_status = 20
								this.closeTips();
							}
						})
					}
				})
			},
			// 取消订单
			cancelOrder() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'cancelOrder', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.cancelOrder, {
							order_no: this.order_no
						}, {
							token: true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code == 1) {
								this.$tools.showToast('关灯成功')
								this.orderList[this.orderIndex].order_status = 20
								this.closeTips();
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 20upx;
	}

	.VerticalMain {
		flex: auto;
		margin-top: 34upx;
	}

	.nav-box {
		overflow-x: scroll;

		.nav-item {
			position: relative;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, .5);
			width: 228rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			text-align: center;
			border: 3rpx solid rgba(255, 255, 255, .5);
			flex: none;
			margin-right: 10upx;
		}

		.active {
			color: #FFFFFF;
			font-weight: 600;
			background: #3D46C7;
			border: 3rpx solid #3D46C7;
		}
	}

	.empty-box {
		margin-top: 64upx;

		.goOrder-btn {
			width: 286upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border: 2upx solid #3D46C7;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 42upx;
		}
	}

	.order-box {
		.order-item {
			min-height: 364upx;
			background: #232428;
			border-radius: 16upx;
			padding-top: 36upx;
			margin-bottom: 20upx;
			position: relative;
			padding-bottom: 20upx;

			.item-top {
				min-height: 304upx;
				align-items: self-start;

				.order-info {
					padding: 0 38upx;
					min-height: 304upx;
					padding-bottom: 10rpx;
					flex: 1;

					.order-name {
						font-size: 34upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}

					.table-info {
						.big {
							font-family: Arial, Arial;
							font-weight: bold;
							font-size: 136rpx;
							color: #F9FAFE;
						}

						.info {
							margin-left: 20upx;

							.table-name {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 34rpx;
								color: #F9FAFE;
							}

							.store-name {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 30rpx;
								color: #FFFFFF;
								margin-top: 20upx;
								opacity: .6;

								.navigation-icon {
									width: 26upx;
									height: 34upx;
									margin-right: 10upx;
								}
							}
						}
					}

					.order-status {
						width: 118upx;
						height: 48upx;
						background: linear-gradient(180deg, #4AA22A 0%, #69D037 100%);
						border-radius: 48upx;
						font-size: 24upx !important;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 48upx;
						color: #FFFFFF;
						text-align: center;
						margin-right: 12upx;
						display: inline-block;
					}
					.residue{
						min-width: 234rpx;
						height: 48rpx;
						background: #464F58;
						border-radius: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						line-height: 48upx;
						font-size: 26rpx !important;
						color: #A3A7AC;
						margin-left: 10upx;
						padding-right: 20upx;
					}
					.noStartedstatus{
						background: #7781FD;
					}
					.noStarted {
						background: linear-gradient( 180deg, #4AA22A 0%, #69D037 100%);
						border: none !important;
					}

					.end {
						background: #848C95;
					}

					.order-time {
						font-size: 34upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 44upx;
						color: #FFFFFF;
						margin-top: 14upx;
						margin-bottom: 20upx;
					}

					.order-text {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 34upx;
						color: #FFFFFF;
						margin-bottom: 16upx;

						text {
							color: #919294;
							display: inline-block;
							width: 130upx;
						}
					}

					.order-btn {
						width: 207upx;
						height: 96upx;
						line-height: 96upx;
						text-align: center;
						border: 2upx solid rgba(255, 255, 255, .5);
						border-radius: 48upx;
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-top: 26upx;
					}
				}

				.order-img {
					width: 304upx;
					height: 304upx;
					flex: none;
				}
			}

			button::after {
				border: none;
			}

			button {
				margin-left: 0;
				margin-right: 0;
				padding-left: 0;
				padding-right: 0;
				line-height: 1;
				color: #FFFFFF;
				font-size: 28rpx;
				background: none;
				width: 100%;
				border: none;
			}

			.open-box {
				padding: 30rpx;
				padding-top: 0;
				justify-content: flex-end;
				.open-btn {
					width: 204rpx;
					height: 96upx;
					line-height: 96upx;
					text-align: center;
					border: 2upx solid rgba(255, 255, 255, .5);
					border-radius: 48upx;
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 10upx;
				}
				.renew-btn{
					width: 207rpx;
					height: 96upx;
					line-height: 96upx;
					text-align: center;
					background: #343940;
					border-radius: 48rpx;
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					margin-left: 10upx;
				}
				.share {
					background: #343940;
					width: 204rpx;
					height: 96upx;
					line-height: 96upx;
					text-align: center;
					border: 2rpx solid #343940;
					font-size: 36upx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					border-radius: 48upx;
					margin-left: 10upx;
				}
			}

			.item-bottom {
				height: 60upx;
				background: #353484;
				border-radius: 0px 0px 16upx 16upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 60upx;
				color: #999999;
				padding: 0 28upx;

				.icon-more {
					border-color: #969696;
					width: 12upx;
					height: 13upx;
					margin-left: 10upx;
				}
			}

		}
	}

	.mask-box {
		background: rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.tips-box {
		width: 660upx;
		height: 390upx;
		background: #232428;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;

		.tips-name {
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #FFFFFF;
			margin: 90upx 0;
		}

		.btn-box {
			margin-top: 10upx;

			.tips-btn {
				width: 240upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #69D037;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.noStarted {
				background: linear-gradient(90deg, #4AA22A 0%, #69D037 100%);
				margin-left: 28upx;
			}
		}
	}
</style>